<template>
	<view class="card">
		<view v-for="(item, index) in sortList" :key="index" class="card-item">
			<view>
				<image :src="item.image" class="img" />
			</view>
			<view>
				<text class="text">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const sortList = [
		{ title: "综合推荐", image: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/5G快线.png" },
		{ title: "中国移动", image: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国移动.png" },
		{ title: "中国联通", image: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国联通.png" },
		{ title: "中国电信", image: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国电信.png" },
		{ title: "中国广电", image: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国广电.png" }
	];
</script>

<style lang="scss">
	.card {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		padding: 5px 0;

		.card-item {
			width: 20vw;
			text-align: center;

			.img {
				width: 10vw;
				height: 10vw;
			}
		}
	}
</style>